<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文章列表</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/main.css">
    <!-- 分页控件样式 -->
    <link rel="stylesheet" href="libs/layui/css/layui.css">
    <script src="./libs/jquery/jquery.min.js"></script>
    <!-- 分页控件 -->
    <script src="libs/layui/layui.js"></script>
    <!-- 引入通用ajax请求 -->
    <script src="js/login.js"></script>
    <!-- 引入模板引擎 -->
    <script src="libs/art-template/template-web.js"></script>
    <!--  定义文章分类下拉框中的模板 -->
    <script type="text/html" id="sort">
        {{each data}}
        <option value="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
    </script>
    <!-- 定义文章列表模板 -->
    <script type="text/html" id="all_essay">
        {{each data}}
        <tr>
            <td>{{$value.title}}</td>
            <td>{{$value.author}}</td>
            <td>{{$value.category}}</td>
            <td class="text-center">{{$value.data}}</td>
            <td class="text-center">{{$value.state}}</td>
            <td class="text-center">
                <a href="article_edit.html" class="btn btn-default btn-xs">编辑</a>
                <a href="javascript:void(0);" class="btn btn-danger btn-xs delete">删除</a>
            </td>
        </tr>
        {{/each}}
    </script>
    <script>
        $(function() {
                //获取文章分类下拉框数据
                get_publish_list();
                //获取所有的文章数据
                get_list()
            })
            //获取文章分类下拉框数据
        function get_publish_list() {
            //进入发表文章页面就向服务器发出ajax请求,调用通用ajax请求
            myAjax('get', '/admin/category/list', null, function(resData) {
                //根据响应回来的数据通过模板动态加载到页面
                // console.log(resData);
                let resHtml = template('sort', resData)
                    //将数据追加到id=selCategory 的select元素中加载到页面
                $('#selCategory').append(resHtml)
            })
        }
        //获取所有的文章数据
        function get_list(curr, perpage) {
            //文章搜索和控件要传入的参数
            let parmas = {
                //文章搜索部分
                key: $('#aname').val(), //搜索关键词
                type: $('#selCategory').val(), //文章类型
                state: $('#selStatus').val(), //文章状态
                //分页控件部分
                page: curr, //当前页，为空返回第1页
                perpage: perpage //每页显示条数,为空默认每页6条(来源控件写死的每页显示条数)
            }
            myAjax('get', '/admin/article/query', parmas, function(resData) {
                console.log(resData);
                /* {
                    "code": 200,
                    "msg": "数据获取成功",
                    "data": {
                        "totalCount": 1, //数据总数
                        "totalPage": 1,//总页数
                        "data": [{
                            "id": 128,
                            "title": "三只松鼠上市求转机，连遭三拒后此次能否顺利通关？",
                            "cover": "http://localhost/https://wpimg.wallstcn.com/06d9fe5f-aeff-49c2-ac0d-9c216a5f39eb.jpg",
                            "date": "2019-05-25",
                            "content": "提交招股书已经过去两年，近日三只松鼠再次迎来上会。",
                            "state": "草稿",
                            "author": "管理员",
                            "read": 233,
                            "categoryId": 1,
                            "category": "爱生活"
                        }]
                    }
                */

                // console.log(curr);
                let resHtml = template('all_essay', resData.data)
                    //将数据追加到id=all_article 的tbody元素中加载到页面
                $('#all_article').html(resHtml)
                    // 获取到数据总条数以后调用分页控件生成控件 传入数据总条数(来源于数据获取响应回来)和当前页码参数(来源分页控件点击),
                datapager(resData.data.totalCount, curr);
            })
        }
        //  生成一个分页控件
        function datapager(totalCount, currpage) {
            layui.use('laypage', function() {
                // 获取到分页控件对象
                var laypage = layui.laypage;
                laypage.render({
                    elem: 'test1', //注意，这里的test1是ID，不用加 # 号 表示分页控件要渲染到id为test1的页面元素中
                    count: totalCount, //数据总数，从服务端得到
                    limit: 6, //每页显示的条数
                    curr: currpage, //当前页数

                    // groups: ,
                    /* 切换分页的回调
                    当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断） */
                    jump: function(obj, first) {
                        //obj包含了当前分页的所有参数，比如：
                        //console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                        //console.log(obj.limit); //得到每页显示的条数

                        //首次不执行
                        if (!first) {
                            //do something  传入得到的当前页和得到的每页显示的条数参数
                            get_list(obj.curr, obj.limit);
                        }
                    }
                });
            })
        }
    </script>
</head>

<body>
    <div class="container-fluid">
        <div class="common_title">
            文章列表
        </div>
        <div class="container-fluid common_con">
            <div class="row opt_btns">
                <div class="col-xs-6">
                    <div class="form-inline">
                        <input type="text" id="aname" class="form-control input-sm" placeholder="输入文章标题...">
                        <select id="selCategory" name="" class="form-control input-sm">
                            <option value="">所有分类</option>
                        </select>
                        <select id="selStatus" name="" class="form-control input-sm">
                            <option value="">所有状态</option>
                            <option value="草稿">草稿</option>
                            <option value="已发布">已发布</option>
                        </select>
                        <button id="btnSearch" class="btn btn-default btn-sm">筛选</button>
                    </div>
                </div>
                <div class="col-xs-6">
                    <a href="article_release.html" class="btn btn-success btn-sm pull-right" id="release_btn">发表文章</a>
                </div>
            </div>
            <table class="table table-striped table-bordered table-hover mp20">
                <thead>
                    <tr>
                        <th>标题</th>
                        <th>作者</th>
                        <th>分类</th>
                        <th class="text-center">发表时间</th>
                        <th class="text-center">状态</th>
                        <th class="text-center" width="100">操作</th>
                    </tr>
                </thead>
                <tbody id="all_article">
                    <tr>
                        <td>王积千造统最头</td>
                        <td>杰克</td>
                        <td>奇趣事</td>
                        <td class="text-center">2017-06-08 07:08:46</td>
                        <td class="text-center">已发布</td>
                        <td class="text-center">
                            <a href="article_edit.html" class="btn btn-default btn-xs">编辑</a>
                            <a href="javascript:void(0);" class="btn btn-danger btn-xs delete">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="row text-center" id="test1">
            </div>
        </div>
    </div>
</body>

</html>